// react入口 =》vue入口main.js
import React from 'react'
import ReactDOM from 'react-dom'
// 全局样式
import './index.css'

console.log('react入口')
// 声明式=》 创建用户界面 =》html
/**
 * React.createElement('html元素名', {属性名1:属性名1值, 属性名2:属性名2值,...}, 子元素1, 子元素2...)
 */
// 子元素1
const h1 = React.createElement('h1', { className: 'test' }, 'hi react')
// 子元素2
const p = React.createElement('p', null, '我是P元素')
// 父元素
const div = React.createElement('div', null, h1, p)

// 作业说明：ul>2个li
const ul2 = React.createElement('h1', { className: 'box' }, '这是一个react案例')
const li1 = React.createElement('li', null, '苹果')
const li2 = React.createElement('li', null, '香蕉')
const li3 = React.createElement('li', null, '橘子')
const ul = React.createElement('ul', { className: 'list' }, li1, li2, li3, ul2)

ReactDOM.render([div, ul], document.getElementById('root'))
